<template>
	<view>
		<!-- 下方点击栏 -->
		<Tab :tabbar="3"></Tab>
		<!-- 主体内容 -->
		<view class="my-box">
			<!-- 设置图标 -->
			<uni-icons custom-prefix="iconfont" type="icon-shezhixitongshezhigongnengshezhishuxing" color="white"
				size="28" class='icon' @click="router('/pages/person/setUp/setUp')"></uni-icons>
			<!-- 背景图 -->
			<image :src='user.userImg' class="bgImg"></image>
			<!-- 定位盒子 -->
			<view class="positionBox">
				<view class="my">
					<!-- 头像 -->
					<view class="avatar">
						<image :src="user.userImg" style="width: 100%; height: 100%;" mode=""></image>
					</view>
					<!-- 用户名 -->
					<text class="user">{{user.userName}}</text>
					<!-- 简介 -->
					<text class="text">{{user.userSign}}</text>
					<!-- 内容 -->
					<view class="conBox">
						<view @click="router('/pages/person/follow')"><text>{{follow}}</text><text>关注</text>
						</view>
						<view @click="router('/pages/person/fans')"><text>{{fans}}</text><text>粉丝</text></view>
						<view><text>{{user.dianzanSize}}</text><text>点赞</text></view>
					</view>
					<!-- 按钮 -->
					<button type="primary" plain="true" size="mini"
						@click="router('/pages/person/personalHomepage')">个人主页 &gt;</button>
				</view>
				<view class="my-two">
					<view class="top">
						<text :class="[index == 1 ? 'active' : '']" @click="isActive(1)">我卖的</text>
						<text :class="[index == 2 ? 'active' : '']" @click="isActive(2)">我买的</text>
					</view>
					<view class="bottom">
						<text>购买订单</text>
						<text @click="detailsShop(index)">查看全部 &gt;</text>
					</view>
					<view class="iconsBox" v-show="index == 2">
						<view @click="router('/pages/person/allOrdersRight', 2)">
							<image src="@/static/image/personal/订单签收.png" mode=""></image>
							订单签收
						</view>
						<view @click="router('/pages/person/allOrdersRight', 2)">
							<image src="@/static/image/personal/已签收.png" mode=""></image>
							已签收
						</view>
						<view @click="router('/pages/person/allOrdersRight', 4)">
							<image src="@/static/image/personal/售后.png" mode=""></image>
							申请/售后
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Tab from '../../components/tab.vue'
	export default {
		data() {
			return {
				index: 1,
				user: {},
				// 渲染数组.length	会报错
				follow: 0,
				fans: 0,
			};
		},
		components: {
			Tab
		},
		methods: {
			// tab切换 (手打)
			isActive(i) {
				this.index = i
			},
			// 购买订单 (查看全部)
			detailsShop(i) {
				// console.log(i)
				if (i == 1) {
					this.router(`/pages/person/allOrdersLeft`)
				} else {
					this.router(`/pages/person/allOrdersRight`)
				}
			},
			router(path, index) {
				if(index) {
					uni.navigateTo({
						url: `${path}?index=${index}`
					})
				} else {
					uni.navigateTo({
						url: path
					})
				}
				
			}
		},
		onShow() {
			const userId = getApp().globalData.userId;
			// console.log(userId)
			if (userId) {
				this.$api.getTcygUserId(userId).then(res => {
					// console.log(res)
					if (res.code == 200 && res.data.length !== 0) {
						res.data.map(item => {
							this.follow = JSON.parse(item.followSize).length
							this.fans = JSON.parse(item.fansSize).length
						})
						this.user = res.data[0]
					} else {
						// 如果没有查询到，就创建一个
						console.log(userId)
						// this.$api.postTcyg({
						// 	userName: '新建用户',
						// 	userImg: 'http://127.0.0.1:7001/public/newAvatar.png',
						// 	userSign: '未编辑签名',
						// 	followSize: "0",
						// 	fansSize: "0",
						// 	dianzanSize: "0",
						// 	userId: userId
						// }).then(res => {
						// 	console.log(res)
						// })
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-box {
		width: 100%;
		height: calc(100vh - 150upx);
		position: relative;

		.icon {
			position: absolute;
			top: 30upx;
			right: 20upx;
			z-index: 999;
		}

		.bgImg {
			width: 100%;
			height: 30vh;
			// 图片模糊度
			filter: blur(10upx);
		}

		.positionBox {
			width: 90%;
			height: 70vh;
			position: absolute;
			top: 13%;
			left: 0;
			right: 0;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;

			.my {
				width: 90%;
				height: 60%;
				background: white;
				border-radius: 20upx;
				box-shadow: 0px 4upx 18upx rgba(0, 0, 0, 0.1);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;

				.avatar {
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
					overflow: hidden;
				}

				.user {
					font-weight: bold;
				}

				.text {
					color: rgb(153, 153, 153);
					font-size: 26upx
				}

				.conBox {
					width: 90%;
					height: 110upx;
					display: flex;
					justify-content: space-around;

					view {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						text:nth-child(2) {
							color: rgb(153, 153, 153);
							font-size: 15px
						}
					}
				}

				button {
					color: #999;
					border-color: rgb(40, 210, 209);
				}
			}

			.my-two {
				width: 90%;
				box-sizing: border-box;
				margin-top: 6%;
				padding: 30upx 0;
				background: white;
				border-radius: 20upx;
				box-shadow: 0px 0px 18upx rgba(0, 0, 0, 0.1);

				.top {
					height: 60upx;
					line-height: 60upx;
					color: rgb(51, 51, 51);
					display: flex;
					justify-content: space-evenly;

					.active {
						color: rgb(40, 210, 209);
					}
				}

				.bottom {
					width: 85%;
					margin: 20upx auto 0;
					padding-bottom: 20upx;
					border-bottom: 2upx solid rgb(228, 228, 228);
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28upx;

					text {
						color: rgb(51, 51, 51);
					}

					text:nth-child(2) {
						color: rgb(40, 210, 209);
						font-size: 24upx
					}
				}

				.iconsBox {
					width: 85%;
					margin: 20upx auto 0;
					display: flex;
					justify-content: space-between;

					view {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 26upx;

						image {
							width: 40upx;
							height: 40upx;
							margin: 10upx 0;
						}
					}
				}
			}
		}
	}
</style>